// 导入react 和 react-dom 
import React from 'react'
import ReactDOM from 'react-dom'

// 导入css文件
import './index.css'

// const title = React.createElement('h1',null,"Hello react 脚手架 !!")
// ReactDOM.render(title,document.getElementById('root'))

// const name  = '  jack'
// // 使用jsx来创建元素
// const title = (
//   <h1 className='title'>
//     hello jsx 
//     <span>{name}</span>
//   </h1>
// )

// 条件渲染
// const isLoading = true
// const loadDate = ()=>{
//   if(isLoading){
//     return <div className='title' style={{color:'red'}}>loading ....</div>
//   }
//   return <div>数据加载完成，此处显示加载后的数据</div>
// }

// const title = (
//   <h1>
//     条件渲染：
//     {loadDate()}
//   </h1>
// )

// 通过函数的方式创建组件
// function Hello(){
//   return (
//     <div>我的第一个函数组件</div>
//   )
// }


// 通过类创建组件

// class Hello extends React.Component{
//   render(){
//     return (
//       <div>第一函数组件</div>
//     )
//   }
// }

// 抽离js引入组件
import Hello from  "./Hello"

// 渲染组件
ReactDOM.render(<Hello/>,document.getElementById('root'))